<template>
  <div class="login-container">
    <!-- 粒子背景 -->
    <Particles
      id="tsparticles"
      :particlesInit="particlesInit"
      :options="particlesOptions"
    />
    <!-- 毛玻璃登录表单 -->
    <div class="glassmorphism-form">
      <LoginForm />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { loadSlim } from 'tsparticles-slim'
import type { Engine } from 'tsparticles-engine'
import LoginForm from '../components/login/LoginForm.vue'

// 新增粒子配置
const particlesInit = async (engine: Engine) => {
  await loadSlim(engine)
}

const particlesOptions = {
  background: { color: "#f8f9fa" },
  particles: {
    number: { 
      value: 150,
      density: { enable: true, value_area: 1600 }
    },
    color: { value:  ["#FF6B6B", "#4ECDC4", "#45B7D1"]  },
    move: { 
      enable: true,
      speed: 0.5,
      direction: "none",
      outModes: "bounce"
    },
    opacity: { value: 0.9 },
    size: {
      value: 3,
      random: true,
      anim: {
        enable: true,
        speed: 2,
        size_min: 0.1
      }
    }
  },
  
    interactivity: {
    detect_on: "canvas",
    events: {
      onhover: {
        enable: true,
        mode: "repulse" // 悬停产生斥力效果
      },
      onclick: {
        enable: true,
        mode: "push" // 点击生成新粒子
      },
      resize: true
    }
  }
}

// 原有表单逻辑保持不变
// ...
</script>

<style scoped lang="scss">
.login-container {
  /* 新增粒子容器定位 */
  position: relative;
  height: 100vh;               // 关键属性[4,6](@ref)
  width: 100vw;
  /* 原有渐变背景调整为半透明 */
  background: linear-gradient(
    135deg, 
    rgba(245,245,245,0.6) 0%,
    rgba(230,230,230,0.55) 100%
  );

  /* 新增层级设置 */
  #tsparticles {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

 
}
.glassmorphism-form {
  background: rgba(138, 125, 125, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 2rem;
  width: 400px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

</style>